{% extends "base.html" %}
{% block css %}
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .input-card .btn{
            margin-right: 1.2rem;
            width: 9rem;
        }

        .input-card .btn:last-child{
            margin-right: 0;
        }
    </style>
{% end %}
{% block container %}
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">轨迹运行情况</h3>
          </div>
          <div class="panel-body">
            <div id="container" style="min-width:400px;height:700px"></div>
          </div>
        </div>

        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">当前湿度变化情况</h3>
          </div>
          <div class="panel-body">
              <div id="container2"></div>
          </div>
        </div>

        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">当前温度变化情况</h3>
          </div>
          <div class="panel-body">
              <div id="container3"></div>
          </div>
        </div>

        <div class="input-card">
                <h4>轨迹回放控制</h4>
                <div class="input-item">
                    <input type="button" class="btn" value="开始回放" id="start" onclick="startAnimation()"/>
                    <input type="button" class="btn" value="暂停回放" id="pause" onclick="pauseAnimation()"/>
                </div>
                <div class="input-item">
                    <input type="button" class="btn" value="继续回放" id="resume" onclick="resumeAnimation()"/>
                    <input type="button" class="btn" value="停止回放" id="stop" onclick="stopAnimation()"/>
                </div>
            </div>
{% end %}


{% block script %}
<script>
    var temperature = 0;
    var humidity = 0;
      window.onload = function () {
          getApi();
          getRaspinfoApi();
      }
      function getApi() {
        //设置时间 5-秒  1000-毫秒  这里设置你自己想要的时间
        setTimeout(getApi,5*1000);
        setTimeout(getRaspinfoApi,5*1000);
        $.ajax({
            url: 'http://{{url}}/humiture',
            type: 'get',
            dataType: 'json',
            success: function (data) {
                //方法中传入的参数data为后台获取的数据
                console.log(data);
                humidity = data['humidity'];
                temperature = data['temperature'];

            }
        })
    }
    Highcharts.setOptions({
	global: {
		useUTC: false
	}
});
function activeLastPointToolip(chart) {
	var points = chart.series[0].points;
	chart.tooltip.refresh(points[points.length -1]);
}
var chart = Highcharts.chart('container2', {
	chart: {
		type: 'spline',
		marginRight: 10,
		events: {
			load: function () {
				var series = this.series[0],
					chart = this;
				activeLastPointToolip(chart);
				setInterval(function () {
					var x = (new Date()).getTime(), // 当前时间
						y = humidity;          // 随机值
					series.addPoint([x, y], true, true);
					activeLastPointToolip(chart);
				}, 3000);
			}
		}
	},
	title: {
		text: '湿度实时数据'
	},
	xAxis: {
		type: 'datetime',
		tickPixelInterval: 150
	},
	yAxis: {
		title: {
			text: null
		}
	},
	tooltip: {
		formatter: function () {
			return '<b>' + this.series.name + '</b><br/>' +
				Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
				Highcharts.numberFormat(this.y, 2);
		}
	},
	legend: {
		enabled: false
	},
	series: [{
		name: '当前湿度',
		data: (function () {
			// 生成随机值
			var data = [],
				time = (new Date()).getTime(),
				i;
			for (i = -19; i <= 0; i += 1) {
				data.push({
					x: time + i * 1000,
					y: humidity
				});
			}
			return data;
		}())
	}]
});
</script>

<script>
    Highcharts.setOptions({
	global: {
		useUTC: false
	}
});
function activeLastPointToolip(chart) {
	var points = chart.series[0].points;
	chart.tooltip.refresh(points[points.length -1]);
}
var chart = Highcharts.chart('container3', {
	chart: {
		type: 'spline',
		marginRight: 10,
		events: {
			load: function () {
				var series = this.series[0],
					chart = this;
				activeLastPointToolip(chart);
				setInterval(function () {
					var x = (new Date()).getTime(), // 当前时间
						y = temperature;          // 随机值
					series.addPoint([x, y], true, true);
					activeLastPointToolip(chart);
				}, 3000);
			}
		}
	},
	title: {
		text: '温度实时数据'
	},
	xAxis: {
		type: 'datetime',
		tickPixelInterval: 150
	},
	yAxis: {
		title: {
			text: null
		}
	},
	tooltip: {
		formatter: function () {
			return '<b>' + this.series.name + '</b><br/>' +
				Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
				Highcharts.numberFormat(this.y, 2);
		}
	},
	legend: {
		enabled: false
	},
	series: [{
		name: '当前温度',
		data: (function () {
			// 生成随机值
			var data = [],
				time = (new Date()).getTime(),
				i;
			for (i = -19; i <= 0; i += 1) {
				data.push({
					x: time + i * 1000,
					y: temperature
				});
			}
			return data;
		}())
	}]
});
</script>

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=您申请的key值"></script>
<script>
    var marker, lineArr = [[121.553411,31.289103],[121.55392,31.289516],[121.554398,31.289809],[121.554677,31.289956],[121.554913,31.290075],[121.555353,31.290249],[121.555835,31.2904],[121.555648,31.290643],[121.555546,31.290762],[121.555465,31.290845],[121.555347,31.290987],[121.554929,31.29145],[121.554816,31.291592],[121.5545,31.29139]];

    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [121.553411,31.289103],
        zoom: 17
    });

    marker = new AMap.Marker({
        map: map,
        position: [121.553411,31.289103],
        icon: "https://webapi.amap.com/images/car.png",
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        angle:-90,
    });

    // 绘制轨迹
    var polyline = new AMap.Polyline({
        map: map,
        path: lineArr,
        showDir:true,
        strokeColor: "#28F",  //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6,      //线宽
        // strokeStyle: "solid"  //线样式
    });

    var passedPolyline = new AMap.Polyline({
        map: map,
        // path: lineArr,
        strokeColor: "#AF5",  //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6,      //线宽
        // strokeStyle: "solid"  //线样式
    });


    marker.on('moving', function (e) {
        passedPolyline.setPath(e.passedPath);
    });

    map.setFitView();

    function startAnimation () {
        marker.moveAlong(lineArr, 200);
    }

    function pauseAnimation () {
        marker.pauseMove();
    }

    function resumeAnimation () {
        marker.resumeMove();
    }

    function stopAnimation () {
        marker.stopMove();
    }
</script>
{% end %}
